<template>
  <div class="base-header">
    <div class="left base">
      <div class="pointer imgbox" v-if="leftIcon" @click="goBack">
        <img src="~images/return.png" class="return">
      </div>
      <span class="date"><span class="week">{{week}}</span> <span class="time">{{date}}</span></span>
    </div>
    <div class="right base">
      <div class="pointer pl35" @click="reload" v-if="rightIcon">
        <img src="~images/reload.png" class="out">
      </div>
      <div class="pointer pl35" @click="logout" v-if="rightIcon">
        <img src="~images/out.png" class="out">
      </div>
    </div>
    <div class="base-header__wrap" @click="toggleFullscreen">
      <img src="~images/logo.png" alt="">
      <span class="base-header__wrap-title">{{title}}</span>
    </div>
  </div>
</template>

<script>
import {
getWeather
} from 'src/api/api'
import { mapActions } from 'vuex'
export default {
  props: {
    title: {
      type: String,
      default: '万联城服集团数据可视化平台',
    },
    leftIcon: {
      type: Boolean,
      default: false
    },
    rightIcon: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      date: this._formatDate(new Date()),
      week: this._getWeekByDay(new Date()),
      weather: '',
      tem: '',
      weaImg: '',
    }
  },
  mounted() {
    let that = this
    this.timer = setInterval(function() {
      that._getTime()
    }, 1000)
  },
  beforeDestroy() {
    if(this.timer){
      clearInterval(this.timer);
    }
  },
  methods: {
    ...mapActions(['logOutAction']),
    _formatDate(date) {
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      let hours = date.getHours()
      let minutes = date.getMinutes()
      let seconds = date.getSeconds()
      // month >= 1 && month <= 9 ? (month = "0" + month) : "";
      // day >= 0 && day <= 9 ? (day = "0" + day) : "";
      minutes >= 0 && minutes <= 9 ? (minutes = "0" + minutes) : "";
      seconds >= 0 && seconds <= 9 ? (seconds = "0" + seconds) : "";
      // return (year + '年' + month + '月' + day + '日')
      return year + "年" + month + "月" + day + "日 " + hours + ":" + minutes + ":" + seconds
    },
    _getTime() {
      this.date = this._formatDate(new Date())
    },
    _getWeekByDay(date) {
      var day = date.getDay() // 将日期值格式化
      var today = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']// 创建星期数组
      return today[day] // 返一个星期中的某一天，其中0为星期日
    }, 
    _getWeather() {
      getWeather().then(res => {
         if (res.success === true) {
          this.weaImg = res.data.weaImg
          this.tem = res.data.tem
          if(res.data.weatherList) {
            res.data.weatherList.forEach(item=> {
              if(item.date == res.data.toDay) {
                this.weather =  item.wea
              }
            })
          }
        }
      })
    },
    logout() {
      this.logOutAction()
      this.$router.push('/')
    },
    goBack() {
      this.$router.go(-1)
    },
    toggleFullscreen() {
      if (this.isFullScreen) {
        this.exitFullScreen()
      } else {
        this.launchFullScreen(document.documentElement)
      }
      this.isFullScreen = !this.isFullScreen
    },
    launchFullScreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      }
    },
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
    },
    playVideo() {
      this.$router.push('/video')
    },
    reload() {
      this.$emit('goReload')
      // location.reload()
      // this.$router.push('/reloadback')
    }
  }
}
</script>

<style lang="scss">
.base-header {
  background: url('http://img.wanlianshenghuo.com/wl/200603142886C908B45E5F4467AF9F1F8076620F09.png') no-repeat center top;
  // background-repeat: no-repeat;
  // background-size: contain;
  background-size: 100% 100%;
  height: 75px;
  // width: 1920px;
  // position: absolute;
  // left: 0;
  // right: 0;
  // top: 0;
  // margin: 0 auto;
  &__wrap {
    // text-align: center;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 250px;
    &-title {
      font-size: 34px;
      padding-left: 10px;
    }
    img {
      width: 114px;
      height: 36px;
    }
  }
  .base {
    padding: 10px 20px 0px 0px;
    font-family:Adobe Heiti Std;
    color: #CBCBCB;
    height: 30px;
    line-height: 30px;
    font-size: 24px;
  }
  .left {
    // position: absolute;
    // top: 10px;
    // left: 0px;
    display: flex;
    align-items: center;
    padding-left: 0;
    float: left;
  }
  .right {
    // position: absolute;
    // top: 10px;
    // right: 10px;
    display: flex;
    align-items: center;
    float: right;
  }
  .date {
    padding-left: 20px;
    font-size: 24px;
    width: 380px;
  }
  .time {
    // width: 300px;
  }
  .week {
    // width: 50px;
    padding-right: 10px;
  }
  .imgbox {
    width: 27px;
    height: 27px;
    padding-left: 20px;
    .return {
      width: 28px;
      height: 20px;
    }
  }
  .out {
    width: 27px;
    height: 27px;
  }
}
</style>>
